<template>
<div>
  <van-nav-bar
  title="城市列表"
  left-arrow
  @click-left="$router.back()"
/>
<div>
<van-index-bar>
  <van-index-anchor index="当前城市" />
  <van-cell title="北京" />

  <van-index-anchor index="热门城市" />
  <van-cell title="文本" />
</van-index-bar>
  <div  v-for="(item) in indexList" :key="item.id">
  <van-index-bar>
  <van-index-anchor :index="item" />
  <van-cell
    v-for="(item,index) in getCellCity(item)"
            :key="index"
            :title="item.label"
   />
</van-index-bar>
</div>
</div>
</div>
</template>

<script>
import { getAllCityAPI, getHotCityAPI } from '@/api/article'
export default {
  data () {
    return {
      allCity: [],
      hotciy: []

    }
  },
  computed: {
    indexList () {
      if (this.allCity.length === 0) {
        return []
      } else {
        const arr = []
        this.allCity.forEach((item) => {
          arr.push(item.short.substring(0, 1).toLocaleUpperCase())
        })
        const arr1 = [...new Set(arr)]
        arr1.sort()
        // console.log(arr1)
        // 处理后赋值
        return arr1
      }
    }
  },
  async getHotCit () {
    const res = await getHotCityAPI()
    console.log(res)
    // this.hotciy = res.body
    // console.log(this.hotciy)
  },
  async created () {
    const res = await getAllCityAPI()
    this.allCity = res.body
    console.log(this.allCity)
  },
  methods: {
    getCellCity (cityName) {
      const arr = this.allCity.filter(item => {
        return item.short.substring(0, 1).toLocaleUpperCase() === cityName
      })
      return arr
    }

  }

}
</script>

<style>

</style>
